<template>
  <div>

    <div>
      <el-button type="primary" @click="thenAdd()" icon="el-icon-circle-plus" size="small">添加</el-button>
      <el-button type="danger" @click="idsDelete(deleteByIds)" icon="el-icon-delete" size="small"
                 :disabled="deleteByIds.length===0">批量删除
      </el-button>
      <!--弹窗-->
      <el-dialog
          :title="addOrUpdate === 'add'? '添加':'编辑'"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-form :model="addData" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
                  :rules="addRules">
        <el-form-item label="职位名称:" prop="name">
          <el-input v-model="addData.name"></el-input>
        </el-form-item>

        <el-form-item>
          <!--@keydown.enter.native 键盘回车触发-->
          <el-button type="primary" @click="submitForm(addOrUpdate)">提交</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>
    </div>
    <!--分页列表-->
    <div class="tableSet">
      <el-table
          border
          ref="multipleTable"
          :data="positions"
          tooltip-effect="dark"
          style="width: 80%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="200">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="地址"
            width="200"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="enabled"
            label="状态"
            width="200"
            show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.enabled === true ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <!--$index 下标，row 行数据-->
            <el-button
                size="mini"
                @click="updateData(scope.$index, scope.row)">编辑
            </el-button>
            <!-- type="danger" 删除按钮红色-->
            <el-button
                size="mini"
                type="danger"
                @click="deleteData(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: "PosMana",
  data() {
    return {
      addOrUpdate: 'add',
      dialogVisible: false,
      addData: {
        id: 0,
        name: ''
      },
      addRules: {
        name: [{
          required: true, message: '请输入数据', trigger:
              'blur'
        }]
      },
      positions: [],
      deleteByIds: []
    };
  },
  // 一进入页面就要调用的接口放到 mounted 里面，比如页面表格分页
  mounted() {
    this.initTable();
  },
  methods: {
    /**
     * 新增
     */
    submitForm(data) {
      // 正则校验表单数据
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {// 验证通过
          if (data === 'add') {
            // 调用添加接口
            this.postRequestData('/system/basic/position/add', this.addData).then(data => {
              // 添加成功
              if (data) {
                // 刷新表格数据
                this.initTable();
              }
            })
            // 关闭弹窗
            this.dialogVisible = false;
            this.addData = {};
          } else {
            // 修改
            this.putRequest('/system/basic/position/update', this.addData).then(data => {
              // 修改成功
              if (data) {
                // 刷新表格数据
                this.initTable();
                this.addData = {};
              }
            })
            // 关闭弹窗
            this.dialogVisible = false
          }
        } else {
          this.$message.error('请输入所有字段!');
          return false;
        }
      });
    }
    ,
    /**
     * 编辑
     * @param index
     * @param row
     */
    updateData(index, data) {
      // 调用新增的弹窗
      this.addOrUpdate = 'notAdd';
      // 开启弹窗输入数据
      this.dialogVisible = true;
      // 赋值id
      this.addData.id = data.id;
    },
    thenAdd() {
      // 调用新增的弹窗
      this.addOrUpdate = 'add';
      // 开启弹窗输入数据
      this.dialogVisible = true;
    },

    /**
     * 批量删除
     */
    idsDelete(data) {
      console.log(data)
      this.$confirm('此操作将永久删除[' + this.deleteByIds.length + ']记录！, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let x = [];
        for (let item of data) {
          x.push(item.id);
        }
        console.log(x)
        // 调用删除接口
        this.postRequestData('/system/basic/position/deletes', x).then(res => {
          if (res) {
            // 刷新表格
            this.initTable();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消'
        });
      });

    },
    /**
     * 复选框勾选的值
     */
    handleSelectionChange(val) {
      this.deleteByIds = val;
    },
    /**
     * 删除
     * @param index
     * @param row
     */
    deleteData(index, data) {
      this.$confirm('确定删除此记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        this.deleteRequest('/system/basic/position/delete', {id:data.id}).then(res => {
          if (res) {
            // 刷新表格
            this.initTable();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消'
        });
      });

    },

    initTable() {
      this.getRequest("/system/basic/position/list").then(data => {
        if (data) {
          this.positions = data
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }

  },

  components: {}
};
</script>

<style scoped>
.tableSet {
  margin-top: 10px;
}

</style>